<template>
  <div>
    <div v-if="!isEdit" class="mod-config">
      <div class="div-e">
        <div class="div-inquire">
          <div class="in-t">
            <div class="in-ts"></div>
            <h3>企业信息</h3>
          </div>
          <div class="in-t-button">
            <el-button v-if="userInfo.id === detailData.followUserId || detailData.typeId !== 1" type="text" @click="showAlterComp">修改</el-button>
            <span v-if="userInfo.id === detailData.followUserId || detailData.typeId !== 1">|</span>
            <el-button type="text" @click="clickGoBack">返回上级</el-button>
          </div>
        </div>
        <el-form title="">
          <el-row>
            <el-col :span="8">
              <el-form-item label="企业名称">{{detailData.name}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="社会统一信用代码">{{detailData.certificateCode}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业地址">{{detailData.addressDetail}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="法人姓名">{{detailData.legalName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人联系方式">{{detailData.legalMobile}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在地区">{{detailData.cityName}} {{detailData.areaName}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="联系人">{{detailData.contactsName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人电话">{{detailData.contactsMobile}}</el-form-item>
            </el-col>
            <el-col v-if="detailData.typeId === 1" :span="8">
              <el-form-item label="跟进人">{{detailData.followUserName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务">{{detailData.contactsPosition}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安许编号">
                <span>{{detailData.securityLicenseCode}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安许到期日期">
                <span>{{detailData.securityLicenseExpiryDate}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
<!--              <el-form-item label="资质项">
                {{detailData.qualiListDetail}}
              </el-form-item>-->
              <div style="white-space: pre-line;display: flex;align-items: flex-start">
                <span style="margin-right: 12px">
                  资质项
                </span>
                <span>
                  {{detailData.qualiListDetail}}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="备注">{{detailData.remark}}</el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="资质证明">
              <img style="width: 50px;height: 50px" v-for="img in detailData.qualiImageList" :src="img">
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="安许证明">
              <img style="width: 50px;height: 50px"  :src="detailData.securityLicenseImageUrl">
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div  class="div-e" >
        <div class="div-inquire">
          <div class="in-t">
            <div class="in-ts"></div>
            <h3>其他信息</h3>
          </div>
        </div>
        <div class="div-tabs">
          <el-tabs v-model="activeName" >
            <el-tab-pane  label="跟进日志"  name="follow-up">
              <regional-list-details-follow-up v-if="activeName==='follow-up'" :id="id"></regional-list-details-follow-up>
            </el-tab-pane>
<!--            <el-tab-pane  label="流转记录" name="turnover">
              <regional-list-details-turnover v-if="activeName==='turnover'"  :id="id"></regional-list-details-turnover>
            </el-tab-pane>-->
            <el-tab-pane v-if="(userInfo.id === detailData.followUserId  || detailData.subordinateFlag === 1) &&  detailData.typeId === 1" label="报考资料"  name="second">
              <enteprise-details-apply v-if="activeName === 'second'" :id="id"></enteprise-details-apply>
            </el-tab-pane>
            <el-tab-pane v-if="(userInfo.id === detailData.followUserId || detailData.subordinateFlag === 1) &&  detailData.typeId === 1" label="合作记录"   name="third">
              <enteprise-details-cooperation v-if="activeName === 'third'" :id="id"></enteprise-details-cooperation>
            </el-tab-pane>
            <el-tab-pane v-if="(userInfo.id === detailData.followUserId || detailData.subordinateFlag === 1) &&  detailData.typeId === 1" label="流转记录"  name="fourth">
              <enteprise-details-turnover v-if="activeName === 'fourth'" :id="id"></enteprise-details-turnover>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <region-list-add-or-update v-else  :is-add="false" :id="id" ></region-list-add-or-update>
  </div>

</template>

<script>
import RegionalListDetailsFollowUp from './regional-list-details-follow-up'
import RegionalListDetailsTurnover from './regional-list-details-turnover'
import RegionListAddOrUpdate from './region-list-add-or-update'
import EntepriseDetailsApply from '../entetpriseComponent/enteprise-details-apply'
import EntepriseDetailsCooperation from '../entetpriseComponent/enteprise-details-cooperation'
import EntepriseDetailsTurnover from '../entetpriseComponent/enteprise-details-turnover'
import {getDetail} from '../../../../api/customer/customerDetail'
import {getUserInfo} from '../../../../api/sys'

export default {
  name: 'regional-list-details',
  components: {RegionListAddOrUpdate,
                RegionalListDetailsTurnover,
                RegionalListDetailsFollowUp,
                EntepriseDetailsTurnover,
                EntepriseDetailsCooperation,
                EntepriseDetailsApply},
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  created () {
    this.getDetail()
    this.getUserInfoReq()
  },
  data () {
    return {
      isEdit: false,
      activeName: 'follow-up',
      detailData: {},
      userInfo: {}
    }
  },
  methods: {
    showAlterComp () {
      this.isEdit = true
    },
    clickGoBack () {
      this.$emit('changeComponent', 'regional-list')
    },
    changeIsEditState (state) {
      this.isEdit = state
      this.getDetail()
    },
    // 资质列表转换成字符串函数
    transformQualiList (data) {
      if (data.qualiList) {
        data.qualiListStr = data.qualiList.map(item => item.name).join(';')
      } else {
        data.qualiListStr = ''
      }
    },
    async getDetail () {
      if (this.id !== null) {
        await getDetail(this.id,
          (data) => {
            this.transformQualiList(data.data)
            this.detailData = data.data
          })
      }
    },
    async getUserInfoReq () {
      await getUserInfo(({user}) => {
        this.userInfo = user
      })
    },
    canUpdate () {
      const userId = this.userInfo.id
      const followUserId = this.detailData.followUserId
      // 是否为一般客户
      const isNormal = this.isNormalCustomer
      debugger
      if (isNormal && userId && followUserId) {
        const isFollow = (userId === followUserId)
        return isFollow || isNormal
      } else {
        return false
      }
    },
    isNormalCustomer () {
      const detail = this.detailData
      if (detail) {
        return detail.typeId === 3
      } else {
        return false
      }
    }

  },
  computed: {

  }
}
</script>

<style lang="less" scoped>
.mod-config {
  padding: 15px !important;
  background-color: #F5F7FA !important;
}

.div-e {
  width: 100%;
  background-color: #FFFFFF;
  padding: 15px;

}

.in-ts {
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}

.in-t {
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  // margin-top: 15px;
  h3 {
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
    color: #000000;
  }
}

.div-inquire {
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;

}

.el-form-item {
  margin-bottom: 0px !important;
}

.error-color{
  color: red;
}
</style>
